<template>
  <div>
   
    <van-swipe-cell v-for="item in list" :key="item.id">
      <van-checkbox v-model="item.checked">单选</van-checkbox>
      <van-card
        :num="item.buynum"
        :price="item.goodsprice / 100"
        :title="item.goodsname"
        :thumb="item.img"
      >
        <template #footer>
          <van-button size="mini">增加</van-button>
          <van-button size="mini">减少</van-button>
        </template>
      </van-card>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>

    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>

import  {changeNav} from  '@/mixins/changenav'
import  {mapState,mapActions} from  "vuex";
export default {
  mixins:[changeNav],//混入
  data() {
    return {
      checkedAll: false,
    };
  },
   created() {
    let userinfo = window.localStorage.getItem("userinfo");
    userinfo = JSON.parse(userinfo);
    this.initList({
        userid:userinfo.id
      })
  
  },
  watch:{
    checkedAll(){
        this.list.forEach(item=>{
          item.checked = this.checkedAll;
        })
    }
  },
  computed:{
    ...mapState("shoppingStore",["list"]),
    totalPrice(){
      let  checkedList   = this.list.filter(item=>item.checked);
      return  checkedList.length ? checkedList.map(item=>item.buynum*item.goodsprice).reduce((a,b)=>a+b) :0

    }
  },
  methods:{
    ...mapActions("shoppingStore",["initList"]),
    onSubmit(){
      if(this.list.some(item=>item.checked)){
         this.$router.push("/pay");
      }else{
        this.$toast.fail("请选择其中一件商品进行结算");
      } 
    }
  },
 
};
</script>

<style scoped>
/* /deep/ */
/* >>> */
.delete-button {
  height: 100%;
}
</style>
